<template>
	<z-paging ref="paging" loading-more-no-more-text="到底啦～" v-model="dataList" @query="queryList">
		<template #top>
			<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
				<template #left>
					<image class="size-32" src="@/static/svg/icon-back.svg" />
				</template>
				<view class="flex center w-full fs-16 text-black">红包中心</view>
			</uni-nav-bar>
			<view class="relative" style="min-height:96px;">
				<image class="w-full" mode="widthFix" src="@/pagesA/static/image/bg-cost.png"></image>
				<view class="absolute full-parent flex-col justify-center px-16 text-white" style="top:0;">
					<view class="fs-12">红包成本</view>
					<view class="mt-2 font-bold" style="font-size:32px;">{{cost}}</view>
				</view>
			</view>
		</template>
		<view class="pt-16 px-16">
			<view v-for="(item,i) in dataList" :key="i" class="bg-white p-12 radius-12 mb-12">
				<view class="flex justify-between item-center">
					<view class="font-semibold flex-1 mr-40 text-cut">{{item.title}} - {{item.activeTitle}}</view>
					<view class="flex-shrink" :style="`color:${activeStateDict[item.activeState].color}`">
						{{activeStateDict[item.activeState].text}}</view>
				</view>
				<view class="mt-16 flex justify-between">
					<view>
						<view class="black fs-16 font-semibold text-center">{{item.totalNum}}</view>
						<view class="mt-4 fs-12 text-color-hint">红包总数</view>
					</view>
					<view>
						<view class="black fs-16 font-semibold text-center">{{item.receiveNum}}</view>
						<view class="mt-4 fs-12 text-color-hint">已领红包</view>
					</view>
					<view>
						<view class="black fs-16 font-semibold text-center">{{item.useNum}}</view>
						<view class="mt-4 fs-12 text-color-hint">已用红包</view>
					</view>
					<view>
						<view class="black fs-16 font-semibold text-center">{{item.expendAmt}}</view>
						<view class="mt-4 fs-12 text-color-hint">支出成本</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup name="RedPacket">
	import {
		onMounted,
		ref,
		unref,
		computed
	} from 'vue'
	import {
		getTotalCostApi,
		redPacketListApi
	} from '@/api/redpacket.js'

	const goBack = () => uni.navigateBack()

	// 活动状态（1-未发布，2-未开始，3-进行中，4-已结束
	const activeStateDict = {
		1: {
			text: '未发布',
			color: '#FCB513',
		},
		2: {
			text: '未开始', // 已发布，活动未开始
			color: '#00AEFF',
		},
		3: {
			text: '进行中',
			color: '#16BE62',
		},
		4: {
			text: '已结束',
			color: 'rgba(51, 51, 51, 0.60)',
		}
	}

	const dataList = ref([])
	const paging = ref(null)
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10,
	})
	const queryList = (pageNo, pageSize) => {
		queryParams.value.pageNum = pageNo
		redPacketListApi(unref(queryParams)).then(res => {
			paging.value.complete(res.list)
		})
	}

	const cost = ref()
	const initData = () => {
		getTotalCostApi().then(res => {
			cost.value = res
		})
	}

	onMounted(() => {
		initData()
	})
</script>